<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>租房</title>
    <link
      rel="stylesheet"
      href="http://cache.amap.com/lbs/static/main1119.css"
    />
    <link
      rel="stylesheet"
      href="http://cache.amap.com/lbs/static/jquery.range.css"
    />
    <script src="http://cache.amap.com/lbs/static/jquery-1.9.1.js"></script>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=82dbc7f19ff363bbfab21ae9237afa32&plugin=AMap.ArrivalRange,AMap.Scale,AMap.Geocoder,AMap.Transfer,AMap.Autocomplete"></script>
    <script src="http://cache.amap.com/lbs/static/jquery.range.js"></script>
    <style>
      /*面板控制样式*/
      .control-panel {
        position: absolute;
        top: 30px;
        right: 20px;
      }
      /*面板内容样式*/
      .control-entry {
        width: 280px;
        background-color: rgba(119, 136, 153, 0.8);
        font-family: fantasy, sans-serif;
        text-align: left;
        color: white;
        overflow: auto;
        padding: 10px;
        margin-bottom: 10px;
      }
      /*文字与右侧的距离*/
      .control-input {
        margin-left: 120px;
      }
      /*输入框宽度*/
      .control-input input[type='text'] {
        width: 160px;
      }
      /*文字样式*/
      .control-panel label {
        float: left;
        width: 120px;
      }
      /*路线规划信息窗体样式*/
      #transfer-panel {
        position: absolute;
        background-color: white;
        max-height: 80%;
        overflow-y: auto;
        top: 30px;
        left: 20px;
        width: 250px;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <!--显示输入地址面板-->
    <div class="control-panel">
      <div class="control-entry">
        <label>选择工作地点：</label>
        <div class="control-input">
          <input id="work-location" type="text" />
        </div>
      </div>
      <!--显示选择交通的面板-->
      <div class="control-entry">
        <label>选择通勤方式：</label>
        <div class="control-input">
          <input
            type="radio"
            name="vehicle"
            value="SUBWAY,BUS"
            onClick="takeBus(this)"
            checked
          />
          公交+地铁
          <input
            type="radio"
            name="vehicle"
            value="SUBWAY"
            onClick="takeSubway(this)"
          />
          地铁
        </div>
      </div>
      <!--显示导入房源的面板-->
      <div class="control-entry">
        <label>导入房源文件：</label>
        <div class="control-input">
          <input type="file" name="file" id="file" onChange="importRentInfo(this)" />
        </div>
      </div>
    </div>
    <div id="transfer-panel"></div>
    <script>
      //地图部分
      var map = new AMap.Map('container', {
        resizeEnable: true, //页面可调整大小
        zoomEnable: true, //可缩放
        center: [121.57473, 31.17685], //地图中心，这里使用的是北京的经纬度，默认中玺体育
        zoom: 11 //缩放等级，数字越大离地球越近
      });

     //添加标尺
      var scale = new AMap.Scale();
      map.addControl(scale);
      //经度、纬度、时间、通勤方式（默认是地铁+公交）
      var arrivalRange = new AMap.ArrivalRange();
      var x,y,t,vehicle = 'SUBWAY,BUS';
      //工作地点，工作标记
      var workAddress,workMarker;
      //房源标记数组
      var rentMarkerArray = [];
      //多边形数组，存储到达范围的计算结果
      var polygonArray = [];
      //路线规划
      var amapTransfer;
      //信息窗体对象

      var infoWindow = new AMap.InfoWindow({
          offset:new AMap.Pixel(0,-30),
      });
      //地址自动补全对象

      var auto = new AMap.Autocomplete({
          input: "work-location"
      });
        //添加事件监听，在选择完地址后调用workLocationSelected
      AMap.event.addListener(auto, 'select', workLocationSelected);

      function takeBus(radio){
          vehicle = radio.value;
          loadWorkLocation();
      }

      function takeSubway(radio){
          vehicle = radio.value;
          loadWorkLocation();
      }
      //导入房源信息触发的方法
      function importRentInfo(fileInfo){
          //获取房源文件名称
          var file = fileInfo.files[0].name;
          loadRentLocationByFile(fileInfo);
      }
      //选择工作地点后触发的方法
      function workLocationSelected(e){
          //更新工作地点，加载到达范围
          workAddress = e.poi.name;
          //调用加载1小时到达区域的方法
          loadWorkLocation();

      }
      //加载工作地点标记
      function loadWorkMarker(x,y,locationName){
          workMarker = new AMap.Marker({
              map:map,
              title:locationName,
              icon:'http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
              position:[x,y]
          });
      }
      //加载到达范围
      function loadWorkRange(x,y,t,color,v){
          arrivalRange.search([x,y],t,function(status,result){
                  if(result.bounds){
                      for(var i=0; i < result.bounds.length; i++){
                          //多边形对象

                          var polygon = new AMap.Polygon({
                              map:map,
                              fillColor:color,  //填充色
                              fillOpacity:'0.4', //透明度
                              strokeColor:color,
                              strokeOpacity:'0.8',
                              strokeWeight:1   //线宽
                          });
                          //到达范围的多边形路径
                          polygon.setPath(result.bounds[i]);
                          //增加多边形
                          polygonArray.push(polygon);
                      }
                  }
              },
              {
                  Policy:v
              });
      }
      //添加房源标记
      function addMarkerByAddress(address){
          //地理编码对象
          var geocoder = new AMap.Geocoder({
              city:'上海',
              radius:1000
          });
          //获取位置
          geocoder.getLocation(address,function(status,result){
              if(status === 'complete' && result.info === 'OK'){
                  //获取地理编码
                  var geocode = result.geocodes[0];
                  //标记对象
                  rentMarker = new AMap.Marker({
                      map:map,   //显示标记的地图
                      title:address, //鼠标移动至标记时所显示的文字
                      //标记图标地址
                      icon:'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                      //位置
                      position:[geocode.location.getLng(),geocode.location.getLat()]
                  });
                  rentMarkerArray.push(rentMarker);
                  //相关房源网络地址
                  rentMarker.content = "<div>房源：<a target = '_blank' href='https://sh.58.com/pinpaigongyu/?key=" + address + "'>" + address + '</a><div>';
                  rentMarker.on('click',function(e){
                      //设置信息窗体显示的内容
                      infoWindow.setContent(e.target.content);
                      infoWindow.open(map,e.target.getPosition());
                      //路线规划是否清除
                      if(amapTransfer) amapTransfer.clear();
                      //换乘对象
                      amapTransfer = new AMap.Transfer({
                          map:map,
                          Policy:AMap.TransferPolicy.LEAST_TIME,
                          city:'上海',
                          panel:'transfer-panel'
                      });
                      //根据起、终点坐标查询换乘路线
                      amapTransfer.search( [ {
                          keyword:workAddress,
                          },{
                          keyword:address,
                          }],function(status,result){})
                  });
              }
          });
      }
      //清除已有的到达区域
      function delWorkLocation(){
          if (polygonArray) map.remove(polygonArray);
          if (workMarker) map.remove(workMarker);
          polygonArray = [];
      }
      //清除现有的房源标记
      function delRentLocation(){
          if(rentMarkerArray)map.remove(rentMarkerArray);
          rentMarkerArray = [];
      }
      //加载1小时到达区域
      function loadWorkLocation() {
  //清除已有的到达区域
  delWorkLocation();
  //创建地址坐标对象
  var geocoder = new AMap.Geocoder({
    city: '上海',
    radius: 1000,
  });
          //获取位置
          geocoder.getLocation(workAddress,function(status,result){
              if (status === "complete" && result.info === 'OK'){
                  var geocode = result.geocodes[0]; //获取地址编码
                  x = geocode.location.getLng(); //经度
                  y = geocode.location.getLat();
                  //加载工作地点标记
                  loadWorkMarker(x,y);
                  //加载工作地点1小时内到达的范围
                  loadWorkRange(x,y,60,'#3f67a5',vehicle);
                  //地图移动到工作地点的位置
                  map.setZoomAndCenter(12,[x,y]);
              }
          });
      }

      function loadRentLocationByFile(fileName) {
          //清除现有的房源标记
          delRentLocation();
          //所有的地点都记录在集合中
          var rent_locations = new Set();
          //获取文件中的房源信息
          /*        $.get(fileName, function (data) {
            //分割信息
            data = data.split('\n');
            //遍历房源位置
            data.forEach(function (item, index) {rent_locations.add(item.split(',')[1]);});
            rent_locations.forEach(function (element, index) {
              //加上房源标记
              addMarkerByAddress(element);
            });
          });

*/
          var file = fileName.files[0];
          var reader = new FileReader();
          reader.readAsText(file);

          reader.onload = function (f) {
              var data = reader.result.split("\n");
              data.forEach(function (item, index) {
                  rent_locations.add(item.split(',')[1]);
              });
              rent_locations.forEach(function (element, index) {
                  //加上房源标记
                  addMarkerByAddress(element);
              });

          };
      }
    </script>
  </body>
</html>